<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart',
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '300px',
        },
        NCRData: {
            type: Object,
            default: {},
        },
    },
    watch: {
        NCRData: {
            deep: true,
            handler(val) {
                this.setOptions()
            },
        },
    },
    data() {
        return {
            chart: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el, null)
        },
        setOptions() {
            const colorList = ['#4D88FE', '#50CCCB', '#FFBF3C']
            let dataList = [
                {
                    value: this.NCRData.NCRSTOP,
                    name: this.$t('homePage.mrbClosed'),
                },
                {
                    value: this.NCRData.NCRCONDUCT,
                    name: this.$t('homePage.mrbInApproval'),
                },
            ]
            this.chart.setOption({
                title: {
                    text: this.$t('homePage.mrbTasks'),
                    top: 10,
                    left: 15,
                    textStyle: {
                        color: '#333333',
                        fontSize: 14,
                        fontWeight: 600,
                    },
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    icon: 'circle',
                    background: '#fff',
                    data: dataList.map((item) => item.name),
                    bottom: 0,
                    itemGap: 20,
                    itemWidth: 8,
                },
                series: [
                    {
                        name: this.$t('homePage.taskNum'),
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            fontWeight: 'bold',
                            rich: {
                                rich_blue: {
                                    color: '#4D88FE',
                                },
                                rich_orange: {
                                    color: '#FFBF3C',
                                },
                                rich_green: {
                                    color: '#50CCCB',
                                },
                            },
                            formatter: (params) => {
                                console.log(params)
                                if (
                                    params.name ===
                                    this.$t('homePage.mrbClosed')
                                ) {
                                    return (
                                        params.name +
                                        '\n\n' +
                                        `{rich_blue|${params.percent}%}`
                                    )
                                } else if (
                                    params.name ===
                                    this.$t('homePage.mrbInApproval')
                                ) {
                                    return (
                                        params.name +
                                        '\n\n' +
                                        `{rich_green|${params.percent}%}`
                                    )
                                }
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 'bold',
                            },
                        },
                        labelLine: {
                            length: 10,
                            length2: 60,
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 2,
                                color: function (params) {
                                    return colorList[params.dataIndex]
                                },
                            },
                        },
                        data: dataList,
                    },
                ],
            })
        },
    },
}
</script>
